<template>
  <div class="p_home">
    <div class="banner">
      <!-- <img style="width: 100%" src="@/assets/pc/page4banner2.png" alt="" /> -->
      <div class="texts">
        <div class="t1">Our Services</div>
        <div class="t2">
          <div>Onta Network is payments in</div>
          <div>the age of internet capital</div>
          <div>markets - bringing the speed</div>
          <div>and interoperability of crypto</div>
          <div>to payment infrastructure</div>
          <div>around the world.</div>
        </div>
        <div class="t3">
          <span>Proudly built with</span>
          <img src="@/assets/svg/banner-1.png" alt="" />
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="box1">
        <div class="desc">
          <div class="t1">OntaPay</div>
          <div class="t2">
            Users can directly use stablecoins for <br />payments with the OntaPay wallet.
          </div>
        </div>
      </div>
      <div class="box2">
        <div class="desc">
          <div class="t1">Merchant Platform</div>
          <div class="t2">
            Merchants can manage their bank <br />cards, crypto payment accounts, and<br />
            payment codes in the backend.
          </div>
        </div>
      </div>
      <div class="box3">
        <div class="desc">
          <div class="t1">Settlement Layer</div>
          <div class="t2">
            Onta Network is built on Base,<br />
            offering advantages oflow cost, <br />high performance, low latency,<br />
            and scalability.
          </div>
        </div>
      </div>
      <div class="box4" id="transactionsAsMining">
        <div class="desc">
          <div class="tt1">
            Transactions As <br />
            Mining
          </div>
          <div class="tt2">
            For each activated hardware device, Onta<br />
            Network mints an on-chainNFT that maps<br />
            to the real-world Point of Sale(POS),<br />
            records itscontributions, and receives<br />
            rewards. The Point of Sale(POS)deviceas<br />
            a validation node in the blockchain <br />
            network and integrates withthe acquiring<br />
            bank system via the Onta Network SDK.
          </div>
        </div>
      </div>
    </div>
    <!-- 第五屏 -->
    <div class="con5">
      <Experience></Experience>
    </div>
  </div>
</template>

<script>
import Experience from '@/components/Experience/index.vue'
export default {
  name: 'pcHome',
  props: {
    locate: {
      type: String,
      default: ''
    }
  },
  components: {
    Experience
  },
  data() {
    return {}
  },
  watch: {
    // 监听locate的变化
    locate: {
      handler(newVal) {
        // 处理locate变化的逻辑
        console.log('locate changed:', newVal)
        if (!newVal) return
        setTimeout(() => {
          const element = document.getElementById(newVal)
          if (element) {
            element.scrollIntoView({
              behavior: 'smooth',
              block: 'center'
            })
          }
        }, 100)
      },
      immediate: true // 立即执行一次
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
@import url('./index.less');
</style>
